<template>
  <div class="tableRight-con">
    <div style="width: 100%; height: 90%;">
      <Righthead v-if="props.issearch" :tablerightfrom='props.tablerightfrom'
        :tablerightfromvalue="props.tablerightfromvalue" :issearchbtn="props.issearchbtn" :searchbtn="props.searchbtn"
        :istablerightbtn="props.istablerightbtn" :tablerightbtn="props.tablerightbtn" />

      <el-table ref="talberef" :data="props.tableData?.list" class="tableclass" row-class-name="table-row-with-border"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column v-for="(item, index) in Object.keys(props.tableData?.tableheadname?.[0] || {})" :key="index"
          :prop="item" :label="props.tableData?.tableheadname?.[0]?.[item]">

          <template #default="scope" v-if="item == 'status'">
            <div :style="{ color: getStatusDisplay(scope.row[item], props.tableData.tablename).color }">
              {{ getStatusDisplay(scope.row[item], props.tableData.tablename).text }}
            </div>
          </template>
          <template #default="scope" v-else-if="item == 'opStatus'">
            <div :style="{ color: getStatusDisplay(scope.row[item], props.tableData.tablename).color }">
              <!-- {{ getStatusDisplay(scope.row[item], props.tableData.tablename).text }} -->
              {{ scope.row[item] }}
            </div>
          </template>
          <template #default="scope" v-else-if="item == 'loginStatus'">
            <div :style="{ color: getStatusDisplay(scope.row[item], props.tableData.tablename).color }">
              <!-- {{ getStatusDisplay(scope.row[item], props.tableData.tablename).text }} -->
              {{ scope.row[item] }}
            </div>
          </template>
          <template #default="scope" v-else-if="item == '1111'">
            <div :style="{ color: getStatusDisplay(scope.row[item], props.tableData.tablename).color }">
              {{ getStatusDisplay(scope.row[item], props.tableData.tablename).text }}
            </div>
          </template>

          <template #default="scope" v-else>
            {{ scope.row[item] }}
          </template>

        </el-table-column>
        <el-table-column v-if="props.istablecolbtn" label="操作">
          <template #default="scope">
            <div style="display: flex;">
              <div v-for="(btnitem, btnindex) in props.tablecolbtn" :key="btnindex">
                <el-button v-if="btnitem.name != '删除'" :link="btnitem.islink" @click="edittablesub(btnitem, scope.row)"
                  :type="btnitem.type" :class="{ 'btnclassiinfo': btnitem.type == '' }">
                  {{ btnitem.name }}
                </el-button>
                <div v-else>
                  <el-popconfirm class="tablepopconfirm" title="你确定要删除吗？" @confirm="confirmEvent(btnitem, scope.row)"
                    width="160px">
                    <template #reference>
                      <el-button :link="btnitem.islink" :type="btnitem.type"
                        :class="{ 'btnclassiinfo': btnitem.type == '' }">
                        {{ btnitem.name }}

                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <el-pagination :pager-count="5" layout="prev, pager, next,total" :total="props.tableData?.total"
      :current-page="props.tableData?.page" @current-change="handlePageChange" @size-change="handlePageSizeChange"
      :page-size="props.tableData?.pageSize">
    </el-pagination>

    <div class="tablebtn" v-if="props.istableformbtn">
      <el-button size="small" class="btnclass" :type="btnitem.type" v-for="(btnitem, btnindex) in props.tableformbtn"
        :key="btnindex" @click="btnclick(btnitem)">
        {{ btnitem.name }}
      </el-button>
    </div>


  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import Righthead from './components/righthead.vue';


const props = defineProps({
  istableformbtn: {
    type: Boolean,
    default: false,
  },
  issearch: {
    type: Boolean,
    default: true
  },
  headfrom: {
    type: Object,
    default: () => ({})
  },
  tablerightfromvalue: {
    type: Array,
    default: () => []
  },
  issearchbtn: {
    type: Boolean,
    default: false
  },
  searchbtn: {
    type: Array,
    default: () => []
  },

  istablerightbtn: {
    type: Boolean,
    default: false
  },
  tablerightbtn: {
    type: Array,
    default: () => []
  },
  tableformbtn: {
    type: Array,
    default: () => []
  },


  tablerightfrom: {
    type: Object,
    default: () => { }
  },
  tablerightfromvalue: {
    type: Array,
    default: () => []
  },
  //
  istablecolbtn: {
    type: Boolean,
    default: false,
  },
  tablecolbtn: {
    type: Array,
    default: () => []
  },
  //
  tableData: {
    type: Object,
    default: () => {
      tablename: ''
      tableheadname: []
      list: []
      total: ''
      page: 1
      pageSize: 10
    }
  }
})


const pageChangeHandler = inject('handlePageChange');
const pageSizeChangeHandler = inject('handlePageSizeChange');

const handlePageChange = (data) => {
  if (pageChangeHandler) {
    pageChangeHandler(data);
  }
}

const handlePageSizeChange = (data) => {

  if (pageSizeChangeHandler) {
    pageSizeChangeHandler(data);
  }
}


const handleSelectionChange = inject('SelectionChange')



const confirmEvent = inject('untablecolbtn')
const edittablesub = inject('untablecolbtn')


const btnclick = inject('tablebtnfun')


const getStatusDisplay = (itemValue, tableName) => {
  switch (tableName) {
    // case '事件管理页面':
    //   return { text: itemValue === 1 ? '启用' : '禁用', color: itemValue === 1 ? 'green' : 'red' };
    case '系统设置':
      return { text: itemValue === 1 ? '启用' : '禁用', color: itemValue === 1 ? 'green' : 'red' };
    case '日志管理':
      return { text: itemValue === '成功' ? '成功' : '失败', color: itemValue === '成功' ? 'green' : 'red' };
    default:
      return { text: itemValue, color: 'inherit' };
  }
};






onMounted(() => {

})


</script>

<style lang="less" scoped>
.tableRight-con {
  width: 100%;
  // width: calc(100% - (330/16 * 1rem));
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .tableclass {
    width: 100%;
    height: calc(100% - (40/16 * 1rem));
  }

  .tablebtn {
    height: 60px;
    width: 100%;

    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btnclass {
      width: 64px;
      height: 32px;
      margin-left: 20px;
    }

    .btnclass:first-child {
      margin-left: 10px;
    }
  }
}

.btnclassiinfo {
  background: transparent;
  color: #1d6db7;
  // border: 1px solid #1d6db7;
}


:deep(.el-table) {
  background-color: #ff000000;
  --el-table-tr-bg-color: #ffffff00;
  --el-table-text-color: rgba(255, 255, 255, 0.60);
  --el-table-header-bg-color: rgba(255, 255, 255, 0.10);
  --el-table-border-color: rgba(255, 255, 255, 0.10);
  --el-table-row-hover-bg-color: none;
}

// 行边框样式 - 应用到整个行
// :deep(.table-row-with-border) {
//   // 使用box-shadow创建行边框效果，避免单元格边框重叠问题
//   box-shadow: inset 0 0 0 1px red;

//   // 确保行内所有单元格没有额外的边框
//   td {
//     border: none !important;
//   }
// }

// 表格行悬停时也保持边框
:deep(.table-row-with-border:hover) {
  box-shadow: inset 0 0 0 1px rgba(24, 254, 254, 1);
  color: #fff;

  td {
    border: none !important;
  }
}

:deep(.el-pager li) {
  background: transparent;
  // color: #fff;
}

:deep(.el-pagination) {
  --el-pagination-button-color: #fff;
}

:deep(.el-pagination>.is-first) {
  color: black;
}

:deep(.el-pagination>.is-last) {
  color: black;
}

:deep(.el-pagination button) {
  color: black;
}

:deep(.el-pagination__total) {
  color: #fff !important;
}

:deep(.tablepopconfirm .el-popper .is-light .el-tooltip .el-popover) {
  background: rgba(9, 27, 43, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
}
</style>